
const elements = [
  {
    text: 1,
    class: "square-one",
    key: "tracking",
  },
  {
    text: 2,
    class: "square-two",
    key: "tracking",
  },
  {
    text: 3,
    class: "square-three",
    key: "tracking",
  },
  {
    text: 4,
    class: "square-four",
    key: "tracking",
  },
  {
    text: 0,
    class: "circle",
    key: "tracking",
  },

];
const container = document.getElementById('square')
const elementMainSquare = document.getElementById("patternElement");

const output = document.createElement("div");
output.className = "output";


function createSquares(text, className, tracking) {
  if (container&&elementMainSquare) {
    const clone = elementMainSquare.content.cloneNode(true);
    clone.querySelector('div').textContent = text;
    clone.querySelector('div').classList.add(className)
    clone.querySelector('div').accessKey = tracking;
    container.append(clone);
    container.after(output);
  }
  else if(container){
    console.error("Error:елемент elementMainSquare не найден")
  }
  else{
    console.error("Error:елемент container не найден")

  }
}

elements.forEach((el) => {
  createSquares(el.text, el.class, el.key);
}
);

const divs = container.querySelectorAll("div");
divs.forEach(
  (elem) => {
    if (elem.accessKey === "tracking") {
      elem.onclick = function () {
        output.textContent = elem.textContent
      }
    }

  })

